<include file="Public/min-header"/>
<style>
    .ajax_bradnlist {
        height: 318px;
        overflow: auto
    }

    .ajax_bradnlist ul li {
        float: left;
        display: inline-flex;
        display: -moz-inline-flex;
        display: -webkit-inline-box;
        width: 20%;
        padding: 6px 0;
    }

    .table-bordered th:first-child {
        width: 8%
    }

    .ajax_bradnlist ul {
        clear: both;
        padding-top: 10px
    }

    .table-bordered tbody tr td {
        vertical-align: middle
    }

    .form-control {
        resize: vertical
    }
</style>
<div class="wrapper">
    <include file="Public/breadcrumb"/>
    <section class="content">
        <!-- Main content -->
        <div class="container-fluid">
            <div class="pull-right">
                <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default"
                   data-original-title="返回"><i class="fa fa-reply"></i></a>
                <a onclick="get_help(this)"
                   data-url="http://www.tp-shop.cn/Doc/Indexbbc/article/id/1072/developer/user.html"
                   class="btn btn-default" href="javascript:;"><i class="fa fa-question-circle"></i> 帮助</a>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> 类型关联</h3>
                </div>
                <form method="post" id="addEditGoodsTypeForm" onsubmit="return checkgoodsTypeName();">
                    <div class="panel-body">

                        <!--商品类型-->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_tongyong" data-toggle="tab">商品类型</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_tongyong">

                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td>类型名称:</td>
                                        <td>
                                            <input type="text" value="{$goodsType.name}" name="name"
                                                   class="form-control" style="width:300px;"/>
                                            <span id="err_name" style="color:#F00; display:none;">商品类型名称不能为空!!</span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>所属分类:</td>
                                        <td>
                                            <div class="col-xs-3">
                                                <select name="cat_id1" id="cat_id1"
                                                        onchange="get_category(this.value,'cat_id2','0');"
                                                        class="form-control" style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                    <foreach name="cat_list" item="v" key="k">
                                                        <option value="{$v['id']}"
                                                        <if condition="$v['id'] eq $goodsType[cat_id1]">
                                                            selected="selected"
                                                        </if>
                                                        >
                                                        {$v['name']}
                                                        </option>
                                                    </foreach>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="cat_id2" id="cat_id2"
                                                        onchange="get_category(this.value,'cat_id3','0');"
                                                        class="form-control" style="margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="cat_id3" id="cat_id3" class="form-control"
                                                        style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <span id="err_cat_id" style="color:#F00; display:none;"></span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--商品类型 end-->
                        <!--关联规格-->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_tongyong" data-toggle="tab">关联规格</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_tongyong">

                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td>分类检索：</td>
                                        <td>
                                            <div class="col-xs-3">
                                                <select name="spec_cat_id1" id="spec_cat_id1"
                                                        onchange="get_category(this.value,'spec_cat_id2','0');spec_scroll(this);"
                                                        class="form-control" style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                    <foreach name="cat_list" item="v" key="k">
                                                        <option value="{$v['id']}">
                                                            {$v['name']}
                                                        </option>
                                                    </foreach>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="spec_cat_id2" id="spec_cat_id2"
                                                        onchange="get_category(this.value,'spec_cat_id3','0');"
                                                        class="form-control" style="margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="spec_cat_id3" id="spec_cat_id3" class="form-control"
                                                        style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <span id="spec_cat_id" style="color:#F00; display:none;"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div id="ajax_specList" class="ajax_bradnlist"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--关联规格 end-->

                        <!--关联品牌-->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_tongyong" data-toggle="tab">关联品牌</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_tongyong">

                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td>分类检索：</td>
                                        <td>
                                            <div class="col-xs-3">
                                                <select name="brand_cat_id1" id="brand_cat_id1"
                                                        onchange="get_category(this.value,'brand_cat_id2','0');brand_scroll(this);"
                                                        class="form-control" style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                    <foreach name="cat_list" item="v" key="k">
                                                        <option value="{$v['id']}">
                                                            {$v['name']}
                                                        </option>
                                                    </foreach>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="brand_cat_id2" id="brand_cat_id2"
                                                        onchange="get_category(this.value,'brand_cat_id3','0');"
                                                        class="form-control margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <select name="brand_cat_id3" id="brand_cat_id3" class="form-control"
                                                        style="width:250px;margin-left:-15px;">
                                                    <option value="0">请选择商品分类</option>
                                                </select>
                                            </div>
                                            <span id="brand_cat_id" style="color:#F00; display:none;"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div id="ajax_brandList" class="ajax_bradnlist"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--关联品牌 end-->

                        <!--添加属性-->
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_tongyong">
                                <table class="table table-bordered" id="attribute_table">
                                    <tbody>
                                    <tr>
                                        <th>排序</th>
                                        <th>属性名称</th>
                                        <th>属性可选值</th>
                                        <th>显示</th>
                                        <th>操作</th>
                                    </tr>
                                    <foreach name="attributeList" item="v" key="k">
                                        <tr>
                                            <td>
                                                <input type="text" name="attr_id[]" value="{$v['attr_id']}"
                                                       class="form-control" style="display:none;"/>
                                                <input type="text" name="order[]" value="{$v['order']}"
                                                       class="form-control"/>
                                            </td>
                                            <td><input type="text" name="attr_name[]" value="{$v['attr_name']}"
                                                       class="form-control"/></td>
                                            <td>
                                                <textarea rows="1" name="attr_values[]" cols="36" class="form-control">{$v['attr_values']}</textarea>
                                            </td>
                                            <td>
                                                <input type="checkbox" name="attr_index[]" value="1"
                                                <if condition="$v['attr_index'] eq 1">checked="checked"</if>
                                                />
                                            </td>
                                            <td>
                                                <a href="javascript:void(0);" class="del_attr">删除</a>
                                            </td>
                                        </tr>
                                    </foreach>
                                    <tr>
                                        <td colspan="5">
                                            <a href="javascript:void(0);" onclick="add_attribute(this);">添加一个属性</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--关联品牌 end-->

                        <div class="pull-right">
                            <input type="hidden" name="id" value="{$goodsType.id}">
                            <button class="btn btn-primary" title="" data-toggle="tooltip" type="submit"
                                    data-original-title="保存"><i class="fa fa-save"></i></button>
                        </div>

                    </div>
                </form>


                <table id="attribute_html" style="display:none;">
                    <tr>
                        <td>
                            <input type="text" name="attr_id[]" value="" class="form-control" style="display:none;"/>
                            <input type="text" name="order[]" value="50" class="form-control"/>
                        </td>
                        <td><input type="text" name="attr_name[]" value="" class="form-control"/></td>
                        <td>
                            <textarea rows="1" name="attr_values[]" cols="36" class="form-control"></textarea>
                        </td>
                        <td>
                            <input type="checkbox" name="attr_index[]" value="1" checked="checked"/>
                        </td>
                        <td>
                            <a href="javascript:void(0);" class="del_attr">删除</a>
                        </td>
                    </tr>
                </table>

                <!--表单数据-->
            </div>
        </div>    <!-- /.content -->
    </section>
</div>
<script>

    // 将品牌滚动条里面的 对应分类移动到 最上面
    //javascript:document.getElementById('category_id_3').scrollIntoView();
    var brandScroll = 0;

    function brand_scroll(o) {
        var id = $(o).val();
        if (!$('#category_id_' + id).is('h5')) {
            return false;
        }
        $('#ajax_brandList').scrollTop(-brandScroll);
        var sp_top = $('#category_id_' + id).offset().top; // 标题自身往上的 top
        var div_top = $('#ajax_brandList').offset().top; // div 自身往上的top
        $('#ajax_brandList').scrollTop(sp_top - div_top); // div 移动
        brandScroll = sp_top - div_top;
    }

    // 将规格滚动条里面的 对应分类移动到 最上面
    //javascript:document.getElementById('category_id_3').scrollIntoView();
    var specScroll = 0;

    function spec_scroll(o) {
        var id = $(o).val();

        if (!$('#categoryId' + id).is('h5')) {
            return false;
        }

        $('#ajax_specList').scrollTop(-specScroll);
        var sp_top = $('#categoryId' + id).offset().top; // 标题自身往上的 top
        var div_top = $('#ajax_specList').offset().top; // div 自身往上的top
        $('#ajax_specList').scrollTop(sp_top - div_top); // div 移动
        specScroll = sp_top - div_top;
    }


    // 判断输入框是否为空
    function checkgoodsTypeName() {
        var name = $("#addEditGoodsTypeForm").find("input[name='name']").val();
        if ($.trim(name) == '') {
            $("#err_name").show();
            return false;
        }
        return true;
    }


    /** 以下是编辑时默认选中某个商品分类*/
    $(document).ready(function () {

    <
        if condition = "$goodsType['cat_id2'] gt 0" >
            // 商品分类第二个下拉菜单
            get_category('{$goodsType[cat_id1]}', 'cat_id2', '{$goodsType[cat_id2]}');
    <
        /if>
        <
        if condition = "$goodsType['cat_id3'] gt 0" >
            // 商品分类第二个下拉菜单
            get_category('{$goodsType[cat_id2]}', 'cat_id3', '{$goodsType[cat_id3]}');
    <
        /if>

        getSpecList(0, 0); // 默认查询所有规格
        getBrandList(0, 0); // 默认查出所有品牌

    });


    /**
     *获取筛选规格 查找某个分类下的所有Spec
     * v 是分类id  l 是分类等级 比如 1级分类 2级分类 等
     */
    function getSpecList(v, l) {
        $.ajax({
            type: "GET",
            url: "/index.php?m=Admin&c=Goods&a=getSpecByCat&cat_id=" + v + "&l=" + l + "&type_id={$goodsType[id]}",//+tab,
            success: function (data) {
                $("#ajax_specList").html('').append(data);
            }
        });
    }

    /**
     *获取筛选品牌 查找某个分类下的所有品牌
     * v 是分类id  l 是分类等级 比如 1级分类 2级分类 等
     */
    function getBrandList(v, l) {
        $.ajax({
            type: "GET",
            url: "/index.php?m=Admin&c=Goods&a=getBrandByCat&cat_id=" + v + "&l=" + l + "&type_id={$goodsType[id]}",//+tab,
            success: function (data) {
                $("#ajax_brandList").html('').append(data);
            }
        });
    }

    // 添加一行属性
    function add_attribute(obj) {
        var trHtml = $('#attribute_html > tbody').html();
        $(obj).parent().parent().before(trHtml);
    }

    // 删除一个 属性
    $(document).on("click", ".del_attr", function () {

        if (confirm('确定要删除吗?')) {
            $(this).parent().parent().remove();
            var attr_id = $(this).parent().parent().find("input[name='attr_id\[\]']").val();

            if (attr_id == '')
                return false;

            $.ajax({
                type: "GET",
                url: "/index.php?m=Admin&c=Goods&a=delGoodsAttribute&id=" + attr_id,
                success: function (data) {
                    // 删除回调
                }
            });
        }
    });
</script>
</body>
</html>